@menu-item-height: 34px;
@keyframes hideIndex {
    0% {
      opacity: 0;
      transform: translate(0, -100px)
    }
  
    100% {
      opacity: 1;
      transform: translate(0, 0)
    }
  }
.layui-side-menu {
    // background: @side-menu-bg;
    width: 220px;
    --tw-bg-opacity: 1;
    background-color: hsl(var(--b2,var(--b1))/var(--tw-bg-opacity));
    // background-color: #f00;
    &.hide{
        width: 0 !important;
    }
    .layui-nav {
        width: 100%;
        .layui-nav-item{
            a{
                height: 34px;
                line-height: 34px;
            }
        }
    }
    .layadmin-setTheme-side {
        color: #333;
    }
    .layui-side-scroll {
        width: 100%;
        display: flex;
        padding: 2px;
        box-sizing: border-box;
        // .scrollbar();
        .layui-nav-tree {
            color: #333;
            .layui-nav-item {
                display: flex;
                // flex-direction: column;
                // align-items: center;
                &::before{
                    content: "";
                    width:4px;
                    height: 20px;
                    margin-top:18px;
                    margin-left:4px;
                    margin-right:4px;
                    background-color: hsla(var(--p)/.6);
                    border-radius: 2px;
                }
                // background: @side-nav-itemed-bg;
                a {
                    // width: 100%;
                    // flex:auto;
                    color: hsla(var(--bc)/var(--tw-text-opacity,1)) !important;
                    // height: @menu-item-height;
                    // line-height: @menu-item-height;
                    padding-left: 10px;
                    border-bottom: 1px solid ;
                    border-color: hsl(var(--bc)/var(--tw-bg-opacity));
                    --tw-bg-opacity: .1;
                    // background-color: hsl(var(--bc)/var(--tw-bg-opacity));
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    i {
                        margin: 0 6px 0 0;
                    }
                    cite {
                        flex: auto;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        text-align: left;
                    }
                    &:hover {
                        // color: @side-font-color;
                    }
                    .layui-nav-more {
                        border-style: solid dashed dashed;
                        border-color: hsla(var(--bc)/var(--tw-text-opacity,1)) transparent transparent;
                    }
                }
                & > dd {
                    flex:auto;
                    width:10px;
                    & > a {
                        height: 56px;
                        line-height: 56px;
                    }
                }
                &>dd{
                    margin:0 0 0 -8px;
                    border-left: 0;
                    background-color:rgba(255, 255, 255, 0);
                }
            }
            .layui-nav-itemed {
                // background: @side-nav-itemed-bg;
                border-left:2px solid hsla(var(--p)/.3);
                background-color:hsla(var(--p)/.06);
                // margin:0 0 0 10px;
                box-sizing: border-box;
                // background: #fff;
                // border-left:2px solid rgba(64,144,254,.5);
                // border-left: 2px solid lighten(@side-layui-nav-bar, 50%);
                > a {
                    // color: @side-nav-itemed-color !important;
                    // color: @side-nav-itemed-this-color !important;
                    // background: @side-nav-itemed-title-bg;
                    font-weight: 600;
                    padding-left: 10px;
                    // border-left: 4px solid @side-nav-itemed-this-color;
                    i {
                        // color: @main-color;
                        // color: @side-nav-itemed-this-color;
                    }
                    cite {
                    }
                    &:hover {
                        // color: @side-font-color;
                    }
                    .layui-nav-more {
                        border-color: transparent transparent hsla(var(--bc)/var(--tw-text-opacity,1));
                    }
                }
                & > .layui-nav-child {
                    padding: 0 0 0 10px;
                    margin:6px 0 0 0px;
                    box-sizing: border-box;
                    border:0px;
                    background: none !important; // display: block !important;
                    animation: hideIndex 0.3s;
                    -moz-animation: hideIndex 0.3s;
                    /* Firefox */
                    -webkit-animation: hideIndex 0.3s;
                    /* Safari and Chrome */
                    -o-animation: hideIndex 0.3s;
                    /* Opera */
                    a {
                        padding-left: 35px;
                        display: flex;
                        align-items: center;
                        // border-bottom: 1px dotted #eee;
                        border-bottom: 1px solid ;
                        border-color: hsl(var(--bc)/var(--tw-bg-opacity));
                        border-left: 4px solid rgba(255, 255, 255, 0);
                        &::before {
                            -webkit-transition: all 0.4s ease-out;
                            -moz-transition: all 0.4s ease-out;
                            -ms-transition: all 0.4s ease-out;
                            -o-transition: all 0.4s ease-out;
                            transition: all 0.4s ease-out;
                            -webkit-border-radius: 5px;
                            -moz-border-radius: 5px;
                            border-radius: 5px;
                            background: hsla(var(--p)/0.8);
                            content: "";
                            position: absolute;
                            left: 10px;
                            height: 5px;
                            width: 5px;
                            // top: 24px;
                        }
                        &:hover:before {
                            width: 20px;
                        }
                    }
                    & .layui-this{
                        &> a{
                            border-left: 4px solid hsl(var(--p)/1) !important;
                        }
                    }
                    .layui-nav-itemed {
                        & > a {
                            // border-left: 4px solid #009688 !important;
                            border-left: 4px solid rgba(0, 0, 0, 0) !important;
                        }
                    }
                }
            }
            dd{
                a{
                    height:46px;
                }
            }
            & .layui-this {
                // background-color: rgba(255, 255, 255, 0) !important;
                
                background-color: hsla(var(--bc)/0.02);
                border-radius: 6px 0px 0px 6px;
                overflow: hidden;
                & > a {
                    
                    // background-color: @side-nav-itemed-this-bg;
                    // border-left: 4px solid @side-nav-itemed-this-dot !important;
                    // box-sizing: border-box;
                    font-weight: bold;
                    // color: @side-nav-itemed-this-color;
                    background: rgba(0, 0, 0, 0.05);
                    // border-radius: 4px;
                }
            }
            .layui-nav-bar {
               
                // background-color: @side-layui-nav-bar;
            }
        }
    }
    .side-menu-type {
        display: flex;
        align-items: center;
        // justify-items: center;
        justify-content: center;
        // background:rgba(0,0,0,.5);
        // background: #eee;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--p)/var(--tw-bg-opacity));
        padding: 10px;
        border-radius: 3px;
        box-sizing: border-box;
        // border-bottom: 2px solid #ccc;
        // color: #333;
        color: hsl(var(--pc)/var(--tw-text-opacity));
        margin: 5px;
        p {
            padding: 0 5px;
            &.icon {
                img {
                    height: 30px;
                }
            }
            &.text {
                font-size: 14px;
                font-weight: bold;
            }
        }
    }
}